<template>
  <transition appear name="slide-up">
    <div class="result-page">
      <img class="result-img" :src="iconSrcTrue" alt="result" />
      <BeginButton :propsStyle="{ backgroundColor: '#198cf9', color: '#fff' }">
        已提交
      </BeginButton>
      <p class="self-score">
        得分：<span>{{ score }}</span>
      </p>
      <Link url="rank" text="前往排行榜" />
      <p style="margin-top: 60px">排行榜将在答题结束后展示</p>
    </div>
  </transition>
</template>

<script>
import { mapState } from "vuex";
import successIcon from "@/assets/icon/success.svg";
import failIcon from "@/assets/icon/fail.svg";
import BeginButton from "../BeginButton";
import Link from "../Link.vue";

export default {
  name: "ResultPage",
  components: {
    BeginButton,
    Link,
  },
  props: {
    result: Boolean, // true代表成功，false代表失败
    title: String,
    text: String,
    score: {
      type: Number,
      required: true,
    },
  },
  computed: {
    iconSrc() {
      return this.result ? successIcon : failIcon;
    },
    iconSrcTrue() {
      return successIcon;
    },
    iconSrcFalse() {
      return failIcon;
    },
    ...mapState(["userId", "gameNumber", "practiceNumber", "previousGameMode"]),
  },
  methods: {
    // ...mapMutations({
    //   commitPlayGame: PLAY_GAME
    // })
  },
};
</script>

<style lang="scss" scoped src="./style.scss"></style>
